<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
    <!--  1.方法渲染  -->
<!--    <table id="demo1"></table>-->
<!--    <script>-->
<!--        layui.use("table", function () {-->
<!--           var table = layui.table;-->

<!--           table.render({-->
<!--               elem: "#demo1", // 绑定元素-->
<!--               height: 500,    // 容器高度-->
<!--               url: "static/demo.json",-->
<!--               page: true,      // 开启分页-->
<!--               cols: [[         // 设置表头-->
<!--                   {field: "id", title: "编号", width: 80, sort: true},-->
<!--                   {field: "username", title: "姓名", width: 80, sort: true},-->
<!--                   {field: "sex", title: "性别", width: 80, sort: true},-->
<!--                   {field: "city", title: "城市", width: 80, sort: true},-->
<!--                   {field: "sign", title: "签名", width: 80, sort: true},-->
<!--                   {field: "experience", title: "经验值", width: 80, sort: true},-->
<!--                   {field: "logins", title: "登录ID", width: 80, sort: true},-->
<!--                   {field: "wealth", title: "财富", width: 80, sort: true},-->
<!--                   {field: "classify", title: "分类", width: 80, sort: true},-->
<!--                   {field: "score", title: "分数", width: 80, sort: true},-->
<!--               ]]-->
<!--           })-->
<!--        });-->
<!--    </script>-->

    <!-- 2.自动渲染 -->
    <table class="layui-table" lay-data="{height: 500, url: 'static/demo.json', page: true}">
        <thead>
        <tr>
            <th lay-data="{field: 'id', width: 80, sort: true}">编号</th>
            <th lay-data="{field: 'username', width: 80, sort: true}">姓名</th>
            <th lay-data="{field: 'sex', width: 80, sort: true}">性别</th>
            <th lay-data="{field: 'city', width: 80, sort: true}">城市</th>
            <th lay-data="{field: 'sign', width: 80, sort: true}">签名</th>
            <th lay-data="{field: 'experience', width: 80, sort: true}">经验值</th>
            <th lay-data="{field: 'logins', width: 80, sort: true}">登录ID</th>
            <th lay-data="{field: 'wealth', width: 80, sort: true}">财富</th>
            <th lay-data="{field: 'classify', width: 80, sort: true}">分类</th>
            <th lay-data="{field: 'score', width: 80, sort: true}">分数</th>
        </tr>
        </thead>
    </table>
</body>
</html>